﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Google Chart</title>
<style type="text/css">
#sale, #prod { width: 100%; height: 300px }
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.gchart.js"></script>
<script type="text/javascript">
$(function () {
	$('#sale').gchart(
		{type: 'line', maxValue: 300,
		title: 'Sales This vs Previous', titleColor: 'blue',
		backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),
		series: [$.gchart.series('Last Month', [157.7, 174.6, 138.5, 90.4,
		98.8, 71.2, 62.6, 42.7, 34.9, 94.4, 96.5, 126.2], 'red'),
		$.gchart.series('This Month', [127.7, 274.6, 188.5, 190.4,
		298.8, 122.2, 22.6, 52.7, 31.9, 194.4, 16.5, 226.2], 'green')],
		axes: [$.gchart.axis('bottom', ['1', '2', '3', '4',
		'5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16','17','18','19','20','21','22'
		,'23','24','25','26','27','28','29','30','31'], 'black'),
		$.gchart.axis('left', 0, 40, 'red', 'right'),
		$.gchart.axis('left', ['K pounds'], [50], 'red', 'right'),
		
		$.gchart.axis('right', [''], [50], 'blue', 'left')],
		legend: 'right'}
		);
		
	$('#prod').gchart(
		{type: 'barVertGrouped', maxValue: 300,
		title: 'Products sold This vs Previous', titleColor: 'red',
		backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),
		series: [$.gchart.series('Last Month', [50, 250, 1, 120], 'red'),
		$.gchart.series('This Month', [180, 220, 10, 80], 'green')],
		axes: [$.gchart.axis('bottom', ['Product 1', 'Product 2', 'Product 3', 'Product 4'], 'black'),
		$.gchart.axis('left', 0, 40, 'red', 'right'),
		$.gchart.axis('left', ['K pounds'], [50], 'red', 'right'),
		
		$.gchart.axis('right', [''], [50], 'blue', 'left')],
		legend: 'right'}
		);
});
</script>
</head>
<body>
<div id="sale"></div>
<br />
<div id="prod"></div>
</body>
</html>
